﻿<%@ Page Title="" Language="C#" MasterPageFile="~/templates/general.master" AutoEventWireup="true" CodeFile="notifications.aspx.cs" Inherits="notifications" %>

<%@ MasterType VirtualPath="~/templates/general.master" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeaderContent" runat="Server">
    <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Dosis|Open+Sans" />
    <link type="text/css" href="<%=Page.ResolveUrl("~/css/tabs/font-awesome.min.css")%>" rel="stylesheet" />
    <link type="text/css" href="<%=Page.ResolveUrl("~/css/tabs/animate-custom.css")%>" rel="stylesheet" />
    <link type="text/css" href="<%=Page.ResolveUrl("~/css/tabs/navion-css.css")%>" rel="stylesheet" />
    <link type="text/css" href="<%=Page.ResolveUrl("~/css/tabs/navion-responsive.css")%>" rel="stylesheet" />
    <script src="scripts/notifications.js"></script>
    <link type="text/css" href="<%=Page.ResolveUrl("~/css/maps/map_devices.css")%>" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA95d2BretRzt0NKif0eZSwuiKWhbSPLmQ&sensor=false"></script>
    <script src="http://js.pusher.com/2.1/pusher.min.js" type="text/javascript"></script>
    <style type="text/css">
        .nav-sub-container p ~ p
        {
            padding-top: 0px;
        }

        .lost
        {
            background: #188225;
        }

        .upper_limit_triggered
        {
            background: #1b3b62;
        }

        .lower_limit_triggered
        {
            background: #e47e35;
        }

        .triggered
        {
            background: #bd9f89;
        }

        .notification
        {
            margin-top: 10px;
            padding: 10px 50px;
            position: relative;
            font-family: Georgia, serif;
            color: #FFF;
            border-radius: 5px;
            font-style: italic;
            height: 95px;
        }

        .arrow-down
        {
            width: 0;
            height: 0;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-top: 15px solid #2C84EE;
            margin: 0 0 0 25px;
        }

        .notification-author
        {
            margin: 0 0 10px 25px;
            font-family: Arial, Helvetica, sans-serif;
            color: #999;
            text-align: left;
        }

            .notification-author span
            {
                font-size: 12px;
                color: #666;
            }

        .one
        {
            width: 50%;
            float: left;
        }

        .two
        {
            width: 50%;
            float: right;
        }

        .one-custom
        {
            width: 70%;
            float: left;
        }

        .two-custom
        {
            width: 30%;
            float: right;
        }
    </style>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
    <div class="fullScreenItem loading" id="notificationsPage">

        <!-- Start Main Item - Metro Style -->
        <div class="nav-metro">

            <!-- Start Sub Menu -->
            <input type="radio" class="nav-subctrl" id="submenu-2" name="navion">
            <div class="nav-submenu animated nav-fadeInUp">

                <!-- Start Sub Tab - Notifications -->
                <label class="nav-subtab subtab-pos-2 solid-orange-2" for="nav-subtab-3c">
                    <span>Notifications</span>
                </label>
                <!-- End Sub Tab -Notifications -->

                <!-- Start Sub Tab Content - Notifications -->
                <input type="radio" class="nav-subtab-ctrl" name="navion-subtab" id="nav-subtab-3c" checked />
                <div class="nav-sub-container animated nav-fadeInLeft nav-subtab-content dark-text transparent-mist">

                    <!-- Start Active Line -->
                    <div class="nav-subtab-active subtab-pos-2 solid-orange-2"></div>
                    <!-- End Active Line -->

                    <!-- Start Content Zone -->
                    <div class="nav-submenu-content">
                        <div class="nav-col-0 dark-text">
                            <div id="notificationsInfo" class="solid-red light-text" style="display: none; height: 65px; margin-right: 40px; margin-left: 40px; margin-bottom: 10px; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; line-height: 17px;"></div>
                            <div id="notifications-list"></div>
                        </div>
                        <div class="clearspace"></div>
                    </div>

                </div>
                <!-- End Sub Tab Content - Notifications -->

                <!-- Start Sub Tab - Action -->
                <label class="nav-subtab subtab-pos-3 solid-purple" for="nav-subtab-2c">
                    <span>Action</span>
                </label>
                <!-- End Sub Tab - Action -->

                <!-- Start Sub Tab Content - Action -->
                <input type="radio" class="nav-subtab-ctrl" name="navion-subtab" id="nav-subtab-2c">
                <div class="nav-sub-container animated nav-fadeInRight nav-subtab-content dark-text transparent-mist">

                    <!-- Start Active Line -->
                    <div class="nav-subtab-active subtab-pos-3 solid-purple"></div>
                    <!-- End Active Line -->

                    <!-- Start Content Zone -->
                    <div class="nav-submenu-content">
                        <div class="nav-submitbt light-text"></div>
                        <div class="nav-col-0 dark-text">
                            <div id="lostInfo" class="solid-purple light-text" style="display: none; width: 92%; margin-left: 20px; margin-bottom: 10px; text-align: center; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; line-height: 17px;">
                            </div>
                            <div class="solid-blue-2" style="margin-left: 20px; margin-right: 15px; margin-bottom: 10px; text-align: center; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; line-height: 17px;">
                                <div id="map-missingdevices" style="height: 350px;"></div>
                            </div>
                        </div>
                        <div class="clearspace"></div>
                    </div>
                    <!-- End Content Zone -->

                </div>
                <!-- End Sub Tab Content - Action -->


                <!-- Start Sub Tab - Settings -->
                <label class="nav-subtab subtab-pos-4 solid-green-2" for="nav-subtab-4c">
                    <span>Settings</span>
                </label>
                <!-- End Sub Tab - Settings -->

                <!-- Start Sub Tab Content - Settings -->
                <input type="radio" class="nav-subtab-ctrl" name="navion-subtab" id="nav-subtab-4c">
                <div class="nav-sub-container animated nav-fadeInRight nav-subtab-content dark-text transparent-mist">

                    <!-- Start Active Line -->
                    <div class="nav-subtab-active subtab-pos-4 solid-green-2"></div>
                    <!-- End Active Line -->

                    <!-- Start Content Zone -->
                    <div class="nav-submenu-content">
                        <div class="nav-submitbt light-text"></div>
                        <div class="nav-col-0 dark-text">
                            <div id="settingsInfo" class="solid-purple light-text" style="width: 92%; margin-left: 20px; margin-bottom: 10px; text-align: center; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; line-height: 17px;">
                                Use the Settings page of Notification to set triggers of your sensors. 
                            </div>
                            <div class="one-custom">
                                <div class="solid-darkblue light-text" style="margin-left: 20px; margin-bottom: 10px; text-align: center; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; line-height: 24px; height: 24px;">
                                    Device Name
                                </div>
                            </div>
                            <div class="two-custom">
                                <select id="device-list" class="solid-darkblue light-text" style="width: 91%; text-align: center; height: 49px; margin-left: 10px; margin-bottom: 10px; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; line-height: 17px;"></select>
                            </div>
                            <div id="row-sensors" class="display-hidden">
                                <div class="one-custom">
                                    <div class="solid-darkblue light-text" style="margin-left: 20px; margin-bottom: 10px; text-align: center; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; height: 24px;">
                                        Sensor Name
                                    </div>
                                </div>
                                <div class="two-custom">
                                    <select id="sensor-list" class="solid-darkblue light-text" style="width: 91%; text-align: center; height: 49px; margin-left: 10px; margin-bottom: 10px; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; line-height: 17px;"></select>
                                </div>
                            </div>
                            <div id="row-triggerFields" class="display-hidden">
                                <div class="one-custom">
                                    <div class="solid-darkblue light-text" style="margin-left: 20px; margin-bottom: 10px; text-align: center; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; height: 24px;">
                                        Trigger name should match the key in the sensor json string on which limits has to be applied
                                    </div>
                                </div>
                                <div class="two-custom">
                                    <input id="keyName" type="text" onfocus="if(this.value==this.value) this.value=''" onblur="this.value=this.value==''?this.value:this.value;" maxlength="100" value="Key Name" name="shareUsername" class="solid-darkblue light-text" style="text-align: center; width: 87%; color: #fff; padding: 2%; border: 0; margin-left: 10px; height: 38px; line-height: 38px; font-size: 14px; font-family: Trebuchet, Arial, sans-serif;" />
                                </div>
                                <div class="one-custom">
                                    <div class="solid-darkblue light-text" style="margin-left: 20px; margin-bottom: 10px; text-align: center; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; height: 24px;">
                                        Lower limit trigger get raised when the value of trigger field is 'less than or equal' than the specified limit
                                    </div>
                                </div>
                                <div class="two-custom">
                                    <input id="lowerLimit" type="text" onfocus="if(this.value==this.value) this.value=''" onblur="this.value=this.value==''?this.value:this.value;" maxlength="100" value="Lower Limit" name="shareUsername" class="solid-darkblue light-text" style="text-align: center; width: 87%; color: #fff; padding: 2%; border: 0; margin-left: 10px; height: 38px; line-height: 38px; font-size: 14px; font-family: Trebuchet, Arial, sans-serif;" />
                                </div>
                                <div class="one-custom">
                                    <div class="solid-darkblue light-text" style="margin-left: 20px; margin-bottom: 10px; text-align: center; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; height: 24px;">
                                       Upper limit trigger get raised when the value of trigger field is 'more than or equal' than the specified limit
                                    </div>
                                </div>
                                <div class="two-custom">
                                    <input id="upperLimit" type="text" onfocus="if(this.value==this.value) this.value=''" onblur="this.value=this.value==''?this.value:this.value;" maxlength="100" value="Upper Limit" name="shareUsername" class="solid-darkblue light-text" style="text-align: center; width: 87%; color: #fff; padding: 2%; border: 0; margin-left: 10px; height: 38px; line-height: 38px; font-size: 14px; font-family: Trebuchet, Arial, sans-serif;" />
                                </div>
                            </div>
                            <div id="row-loadTrigger" class="display-hidden">
                                <div class="two-custom">
                                    <input id="btnLoadTrigger" type="submit" value="Set Trigger" name="btnLoadTrigger" class="solid-green-2 light-text" style="margin-bottom: 15px; cursor: pointer; text-align: center; width: 91%; margin-left: 11px; color: #fff; padding: 2%; border: 0; margin-top: 10px; height: 45px; line-height: 45px; font-size: 14px; font-family: Trebuchet, Arial, sans-serif;" />
                                </div>
                            </div>
                        </div>
                        <div class="clearspace"></div>
                    </div>
                    <!-- End Content Zone -->

                </div>
                <!-- End Sub Tab Content - Settings -->

            </div>
            <!-- End Sub Menu -->

        </div>
        <!-- End Main Item - Metro Style -->
    </div>
</asp:Content>

